<script lang="ts">
export default {
  name: 'manage',
};
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref, toRefs} from 'vue';

import RepositoryDecoderEntityTable from './components/RepositoryVersionEntityTable.vue';
import RepositoryDecoderFormHeader from './components/RepositoryVersionFormHeader.vue';

// 引入设备的API和数据类型
import {RepoCompVersionQueryParam} from "@/api/repo/comp/cloud/dev-template/version/types";

const repositoryDecoderEntityTableRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样
const repositoryDecoderFormHeaderRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样

const state = reactive({
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoCompVersionQueryParam,
});

const {
  // 查询参数
  queryParams,
} = toRefs(state);


/**
 * 响应查询按钮：页查询数据
 */
function handleQuery(source: string, value: any) {
  queryParams.value = value;
  repositoryDecoderEntityTableRef.value.refreshTable(queryParams);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});
</script>

<template>
  <div class="app-container">

    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>动态解码</el-breadcrumb-item>
        <el-breadcrumb-item>版本列表</el-breadcrumb-item>
        <el-breadcrumb-item>操作列表</el-breadcrumb-item>
      </el-breadcrumb>
      <br>
    </div>

    <!-- 表单头：各种按钮 -->
    <repository-decoder-form-header ref="repositoryDecoderFormHeaderRef"
                                    @query="handleQuery"
    />

    <!-- 数据表单：创建/修改 -->
    <repository-decoder-entity-table ref="repositoryDecoderEntityTableRef"
    />

  </div>
</template>
